<template>
    <div class="add-account">
        <el-dialog title="添加系统用户" :visible.sync="dialogFormVisible">
            <!--  :rules="rules" -->
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="form.name" autocomplete="off" maxlength="50" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" maxlength="11" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="选择角色" prop="role">
                    <el-select v-model="form.role" placeholder="请选择">
                        <el-option label="学管" value="1"></el-option>
                        <el-option label="发布方" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :loading="loading" type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '../../../utils/request';
export default {
    name: 'addAccount',
    data() {
        return {
            dialogFormVisible: false,
            loading: false,
            form: {
                name: '',
                phone: '',
                password: '',
                role: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (/^[a-zA-Z0-9]*$/.test(value)) {
                                callback();
                            } else {
                                callback(new Error('用户名仅支持字母或数字'));
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { type: 'txt', message: '仅支持数字' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (/^[A-Za-z0-9!@#$%^&*()_\-+=\[\]{};':,<.>/?]*$/.test(value)) {
                                callback();
                            } else {
                                callback(new Error('密码仅支持字母或数字和特殊字符串'));
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                role: [{ required: true, message: '请选择角色', trigger: 'change' }]
            }
        };
    },
    methods: {
        // 回显
        echo(val) {
            if (!val) {
                Object.keys(this.form).forEach((item) => {
                    this.form[item] = '';
                });
            } else {
            }
        },
        // 确定
        submit() {
            console.log(this.form);
            const obj = Object.keys(this.form);
            for (let i = 0; i < obj.length; i++) {
                if (!this.form[obj[i]]) {
                    this.$message.success('缺少参数');
                }
            }
            request({
                url: `/admin/sys-user/v1/add`,
                method: 'post',
                data: {
                    password: this.form.password,
                    phone: this.form.phone,
                    roleId: this.form.role,
                    userName: this.form.name
                }
            }).then((res) => {
                console.log(res.data);
                this.$message.success('操作成功');
                this.$emit('gitlist');
            });
            this.dialogFormVisible = false;
        }
    }
};
</script>